<template>
    <div class="jtxxk-detail">
        <Card :icon="jtgkIcon" title="集团信息库">
            <div class="jtxxk-detail-jtgk">
                <div class="flex">
                    <div class="left">
                        <img src="@/assets/img/logo.jpg" :alt="gkxx.qymc" />
                    </div>
                    <div class="right">

                        <div class="name">{{ gkxx.qymc }}</div>
                        <div class="tags">

                        </div>
                        <div class="info">
                            <div class="half ell" :title="gkxx.qymc">
                                企业名称：{{ gkxx.qymc }}
                            </div>
                            <div class="half ell" :title="gkxx.zb">
                                总部：{{ gkxx.zb }}
                            </div>
                            <div class="half ell" :title="gkxx.zcdz">
                                注册地址：{{ gkxx.zcdz }}
                            </div>
                            <div class="half ell" :title="gkxx.clrq">
                                成立日期：{{ gkxx.clrq }}
                            </div>
                            <div class="half ell" :title="gkxx.zczb">
                                注册资本：{{ gkxx.zczb ? gkxx.zczb + gkxx.zczbdw : "" }}
                            </div>
                            <div class="half ell" :title="gkxx.djzclx">
                                登记注册类型：{{ gkxx.djzclx }}
                            </div>
                            <div class="half ell" :title="gkxx.fddbr">
                                法定代表人：{{ gkxx.fddbr }}
                            </div>
                            <div class="half ell" :title="gkxx.hyMc">
                                所属行业：{{ gkxx.hyMc }}
                            </div>
                            <div class="info full">

                                <div v-html="gkxx.zyyw"></div>
                            </div>
                            <div class="info full">
                                <el-form :inline="true" :model="formData" class="demo-form-inline" size="mini">
                                    
                                    <el-form-item label="所属集团">
                                        <el-select v-model="formData.ssjt" placeholder="">
                                            
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="上级公司">
                                        <el-input v-model="formData.sjgs" placeholder=""></el-input>
                                    </el-form-item>
                                    <el-form-item label="企业类型">
                                        <el-select v-model="formData.qylx" >
                                            <el-option label="千户企业" value="千户企业"></el-option>
                                            <el-option label="省局列名" value="省局列名"></el-option>
                                            <el-option label="市局列名" value="市局列名"></el-option>
                                            <el-option label="其他类型" value="其他类型"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 企业标签 -->
            <div>
                <div class="head_tb">
                    <div class="title_tb">企业标签</div>
                    <div>
                        <el-button type="danger" size="mini" class="mybtn" @click="delBq()"><i class="el-icon-minus"></i></el-button>
                        <el-button type="danger" size="mini" class="mybtn" @click="addBq()"><i class="el-icon-plus"></i></el-button>
                    </div>

                </div>
                <el-table v-loading="bqloading" ref="bqEltable" :data="bqTableDatas" style="width: 100%" fit border @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="63" align="center"> </el-table-column>
                    <el-table-column type="index" label="序号" width="60" align="center" :index="currIndex"> </el-table-column>
                    <el-table-column label="标签名称" prop="bq" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.isEdit">
                                <el-input size="mini" ref="bqInput" v-model="scope.row.bq" placeholder="" style="width:45%;" @blur="showInput(scope.$index)"></el-input>
                            </div>
                            <div v-else>
                                {{ scope.row.bq }}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div style="margin-top:20px;">
                <div class="head_tb">
                    <div class="title_tb">附件文档</div>
                    <div>
                        <el-button type="danger" size="mini" class="mybtn" @click="deleteDocs()"><i class="el-icon-minus"></i></el-button>
                        <el-button type="danger" size="mini" class="mybtn" @click="upload()"><i class="el-icon-plus"></i></el-button>
                    </div>

                </div>
                <el-table v-loading="fjloading" ref="bqEltable" :data="fjTableDatas" style="width: 100%" fit border @selection-change="dochandleSelectionChange">
                    <el-table-column type="selection" width="63" align="center"> </el-table-column>
                    <el-table-column type="index" label="序号" width="60" align="center" :index="currIndex"> </el-table-column>
                    <el-table-column label="附件名称" prop="doc_name" align="center">


                        <template slot-scope="scope">

                            <div class="underline-text" @click="queryDocs(scope.row)">
                                {{ scope.row.doc_name }}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                
            </div>

            <div style="margin-top:20px;">
                <div class="head_tb">
                    <div class="title_tb">子公司列表</div>
                    <div></div>
                </div>
                <my-table v-loading="zgsloading" ref="zgsEltable" style="width: 100%" row-key="id" :showsummary="false" :columns="zgstableColumns" :tableData="zgsTableDatas" :current="false" highlight-current-row :ifSelect="false" min-height="auto" :isShowPage="false" @onSelect="onSelectionChange" @onSelectAll="handleselectAll" />
            </div>

            <div style="text-align:center;padding:20px;">
                <el-button type="primary" size="mini">保存</el-button>
                <el-button type="primary" size="mini" @click="cancel('list')">取消</el-button>
            </div>


        </Card>
        <!-- 上传组件隐藏 -->
        <el-upload style="display:none;" ref="uploadTemplate" class="upload-demo" :before-upload="beforeUpload" action drag :show-file-list="false" :http-request="httpRequest" :multiple="false" accept=".doc,.docx">
            <el-button size="small" type="primary" ref="uploadTemplate_btn">点击上传</el-button>
        </el-upload>

        <el-dialog title="文件预览" :visible.sync="dialogVisible" append-to-body width="1440px" destroy-on-close top="6vh">
            <div v-loading="dialogLoading" class="fileView">
                <div ref="fileView"></div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="downFile()" size="mini" :disabled="dialogLoading">下载报告</el-button>
            </span>
        </el-dialog>
    </div>
</template>


<script>
import Card from './components/card.vue'
import jtgkIcon from "@/assets/img/jtxxk/jtgk-icon.png";
import { downloadFile } from "@/utils/utils"
import { queryList, queryDocList, deleteDoc, upload_doc, queryNsrDjxx, queryNsrDjxxKz, update, queryDoc } from '@/api/cxtj/zdsygl'
export default {
    components: {
        Card
    },
    props: {
        nsrsbh: { type: String, default: false }
    },
    data() {
        return {
            jtgkIcon,
            dialogVisible: false,
            dialogLoading: false,
            fileBlob: null,
            fileName: '',
            gkxx: {
                qymc: '',
                zb: '',
                zcdz: '',
                clrq: '',
                zczb: '',
                djzclx: '',
                fddbr: '',
                hyMc: '',
                zyyw: ''
            },
            formData:{},
            bqloading: false,
            bqTableDatas: [],
            bqSelect: [],

            //附件文档
            fjloading: false,
            fjTableDatas: [],
            docSelect: [],
            //公司
            zgsloading: false,
            zgstableColumns: [
                {
                    label: '企业名称',
                    prop: 'qymc',
                    align: 'center',

                },
                {
                    label: '成员层级',
                    prop: 'cycj',
                    align: 'center',

                },
                {
                    label: '是否上市',
                    prop: 'sfss',
                    align: 'center',

                }
            ],
            zgsTableDatas: [],
            queryObj: {
                frgsmc: '', //公司名称
                nsrxydjList: [],
                nsrzgList: [],
                zzshzsblxList: [],
                qysdshzsblxList: [],
                jyztDmList: [],
                hyDmList: [],
                qylxDmList: [],
                pageNo: 1,
                pageSize: 20
            },
        }
    },
    mounted() {
        this.getData()
        this.getBqTableData()
        this.getqueryDocList()
    },
    methods: {
        //获取公司基本信息
        getData() {
            let data = {
                nsrsbh: this.nsrsbh
            }
            queryNsrDjxx(data).then(res => {
                console.log(res)
                if (res.data.length > 0) {
                    this.gkxx.qymc = res.data[0].nsrmc,
                        this.gkxx.zb = res.data[0].nsrmc,
                        this.gkxx.zcdz = res.data[0].zcdz,
                        this.gkxx.clrq = res.data[0].djrq,
                        this.gkxx.djzclx = djzclx_dm,
                        this.gkxx.fddbr = res.data[0].fddbrxm,
                        this.gkxx.hyMc = '电气行业' //无
                }

            })
            queryNsrDjxxKz(data).then(res => {
                if (res.data.length > 0) {
                    this.gkxx.zyyw = "主营业务：" + res.data[0].jyfw
                    this.gkxx.zczb = res.data[0].zczb
                }

            })
        },





        //获取标签表格
        getBqTableData() {

            this.bqloading = true
            queryList({ nsrsbh: this.nsrsbh }).then(res => {
                console.log(res)
                if (res.code == 200) {
                    this.bqloading = false
                    let bqs = res.data.records[0].bq.split("|")
                    bqs.forEach(item => {
                        console.log(item)
                        this.bqTableDatas.push({ nsrsbh: this.nsrsbh, bq: item, isEdit: false })
                    });
                }
            })
        },
        // 标签表格 多选 事件
        handleSelectionChange(selectedRows) {
            this.bqSelect = selectedRows;
            console.log(this.bqSelect)
        },
        bqhandleselectAll(selectedRows) {
            this.bqSelect = selectedRows;
        },
        //删除标签
        delBq() {
            if (this.bqSelect.length > 0) {
                for (let j = 0; j < this.bqTableDatas.length; j++) {
                    for (let i = 0; i < this.bqSelect.length; i++) {
                        if (this.bqSelect[i].bq == this.bqTableDatas[j].bq) {
                            this.bqTableDatas.splice(j, 1)
                        }

                    }
                }
                this.bqSelect = []
                this.$nextTick(() => {
                    //清楚选择状态
                    this.$refs.bqEltable.clearSelection()
                });

            } else {
                this.$message.error('请选择一条数据删除');
                return false;
            }
        },

        //新增标签
        addBq() {
            this.bqTableDatas.push({
                nsrsbh: this.nsrsbh, bq: '', isEdit: true, isNew: true
            })
            this.$refs.bqInput.focus()
        },

        showInput(index) {

            if (this.bqTableDatas[index].bq == '') {
                this.$message({
                    type: "error",
                    message: '请输入需要添加的标签',
                });
            } else {
                this.bqTableDatas[index].isEdit = !this.bqTableDatas[index].isEdit
            }



        },
        currIndex(index) {
            return index + 1;
        },

        //文档列表
        getqueryDocList() {
            this.fjloading = true
            queryDocList({ nsrsbh: this.nsrsbh }).then(res => {
                this.fjloading = false

                if (res.code == 200) {
                    this.fjTableDatas = res.data
                }
            })
        },
        // 附件表格 多选 事件
        dochandleSelectionChange(selectedRows) {
            this.docSelect = selectedRows;
            console.log(this.docSelect)
        },
        // 删除名册文档
        deleteDocs() {

            if (this.docSelect.length > 0) {
                this.fjloading = true;
                this.$confirm('该删除后将不可恢复，是否删除？', '友情提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'JmconfirmCancelButton',
                    type: 'warning'
                }).then(() => {
                    let idArr = []
                    this.docSelect.forEach(item => {
                        idArr.push(item.id)
                    })
                    let data = {
                        ids: idArr.join(','),
                        nsrsbh: this.nsrsbh,

                    }

                    deleteDoc(data).then(res => {
                        this.fjloading = false;
                        this.$message({
                            type: "success",
                            message: '删除成功',
                        });
                        this.getqueryDocList()
                    })
                })

            } else {
                this.$message.error('请选择一条数据删除');
                return false;
            }




        },
        //查看文档
        queryDocs(data) {
            this.dialogVisible = true
            this.dialogLoading = true
            let param = {
                dqyMcxxDoc: { ...data },
            }
            queryDoc(param).then(res => {
                console.log(res)
                if (res.code == 200) {

                    this.dialogLoading = false
                    var raw = window.atob(res.data.file_data);
                    var uInt8Array = new Uint8Array(raw.length);
                    for (var i = 0; i < raw.length; i++) {
                        uInt8Array[i] = raw.charCodeAt(i);
                    }
                    const blob = new Blob([uInt8Array], {
                        type: "application/msword"
                    });
                    this.fileName = res.data.doc_name
                    this.fileBlob = blob
                    let docx = require("docx-preview");
                    this.$nextTick(() => {
                        docx.renderAsync(blob, this.$refs.fileView); // 渲染到页面
                    });
                }


            })
        },
        downFile() {
            if (this.fileBlob) {
                const elink = document.createElement("a");
                elink.download = this.fileName;
                elink.style.display = "none";
                elink.href = URL.createObjectURL(this.fileBlob);
                document.body.appendChild(elink);
                elink.click();
                URL.revokeObjectURL(elink.href); // 释放URL 对象
                document.body.removeChild(elink);
            }
        },
        //上传doc附件
        //s上传名册
        upload() {
            this.$refs['uploadTemplate'].$refs['upload-inner'].handleClick()
        },
        beforeUpload(file, fileList) {


            if (file.size > 1024 * 1024 * 10) {
                this.$message.warning(
                    "你上传的 \“" + file.name + "\” 文件过大，请上传小于2M的文件。"
                );
                return false;
            }

            if (
                file.name.indexOf("@") != -1 ||
                file.name.indexOf("#") != -1 ||
                file.name.indexOf('""') != -1 ||
                file.name.indexOf("<") != -1 ||
                file.name.indexOf(">") != -1 ||
                file.name.indexOf("?") != -1 ||
                file.name.indexOf("|") != -1 ||
                file.name.indexOf("/") != -1 ||
                file.name.indexOf(":") != -1 ||
                file.name.indexOf("`\`") != -1
            ) {
                this.$message.warning(
                    "你上传的 \“" +
                    file.name +
                    "\” 文件有特殊字符，文件名中不可存在特殊字符,请重新上传"
                );
                return false;
            }

            let index = file.name.lastIndexOf(".");
            let Type = file.name.substr(index + 1, file.name.length);
            if (["doc", "docx"].indexOf(Type.toLowerCase()) === -1) {
                this.$message({
                    type: "warning",
                    message: "请上传后缀名为doc,docx的附件！",
                });
                return false;
            }
        },
        httpRequest(data) {
            console.log(data);
            let fd = new FormData();
            fd.append("file", data.file);
            fd.append("nsrshb", this.nsrsbh);

            upload_doc(fd).then((res) => {
                if (res.code == 200) {

                    this.$message({
                        type: "success",
                        message: res.message,
                    });
                    this.getqueryDocList()

                }
            });
        },
        // 标签表格 多选 事件
        onSelectionChange(selectedRows) {
            this.bqSelect = selectedRows;
            console.log(this.bqSelect)
        },
        handleselectAll(selectedRows) {
            this.bqSelect = selectedRows;
        },
        cancel(name, params) {
            this.$emit('changePage', name, params);
            // this.changePage(name, params)
            // this.$router.push({
            //     name: name,
            //     params: { id: params.id }

            // })
        },
        //保存名册信息
        save() {
            //   this.bqTableDatas
        }

    }
}
</script>


<style lang="scss" scoped>
.jtxxk-detail {


    .flex {
        display: flex;
    }

    .body {
        overflow-y: auto;
        height: calc(100vh - 130px);

        .tabs {
            width: 1200px;
            margin: 12px auto 0;

            ::v-deep .el-tabs__item {
                padding: 0;
                background-color: #fff;
                padding: 0 20px;
                box-shadow: none;
                border-radius: 0;
            }

            ::v-deep .el-tabs__nav-wrap::after {
                display: none;
            }

            ::v-deep .el-tabs__header {
                margin-bottom: 0;
            }

            ::v-deep .el-tabs__content {
                overflow: unset;
            }

            ::v-deep .el-tabs__nav {
                border-radius: 8px;
                overflow: hidden;
                z-index: 0;
            }
        }
    }

    ::v-deep ::v-deep .left-right {
        display: flex;

        .left {
            flex: 1;
        }

        .right {}
    }

    ::v-deep .info {
        display: flex;
        flex-wrap: wrap;
        // font-size: 12px;
        font-size: 14px;

        .half,
        .third,
        .full,
        .em {
            margin-bottom: 8px;
        }

        .ell {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .half {
            width: 50%;
        }

        .third {
            width: 33.33%;
        }

        .full {
            width: 100%;
        }

        .em {
            // margin-top: 8px;
            font-weight: 700;
        }

        .no-em {
            font-weight: normal;
        }

        .h8 {
            height: 8px;
        }

        .ul {
            display: list-item;
            list-style-type: disc;
            margin-left: 14px;
        }

        .ml14 {
            margin-left: 14px;
        }

        .mb8 {
            margin-bottom: 8px;
        }

        .inline-block {
            display: inline-block;
        }

        .strong {
            color: #f59a23;
            font-weight: 700;
        }

        .bg-gray {
            line-height: 2;
            padding-left: 6px;
            background-color: #f2f2f2;
        }

        .gray {
            color: #7f7f7f;
        }
    }

    ::v-deep .hr {
        width: 100%;
        border-bottom: 2px solid #f2f2f2;
        margin-top: 2px;
        margin-bottom: 10px;
    }

    ::v-deep .font12 {
        // font-size: 12px !important;
    }

    ::v-deep .font14 {
        // font-size: 14px;
        font-size: 16px;
    }

    ::v-deep .tag {
        // font-size: 12px;
        font-size: 14px;

        &:not(:first-child) {
            margin-left: 8px;
        }

        &.padding {
            padding: 2px 4px;
        }

        &.blue {
            color: #0064c8;
            background-color: #ecf5fc;
        }

        &.red {
            color: #555;
            background-color: #f2f2f2;
        }

        &.deepred {
            color: #f2001d;
            background-color: #ffede8;
        }

        &.orange {
            color: #b8741a;
            background-color: #fff2e9;
        }
    }
}

.jtxxk-detail-jtgk {
    .left {
        margin-right: 12px;
        width: 95px;
        font-size: 12px;
        text-align: center;

        img {
            width: 95px;
        }
    }

    .right {
        flex: 1;
        overflow: hidden;
        position: relative;

        .name {
            font-weight: 700;
            font-size: 20px;
        }

        .tags {
            margin-top: 4px;
            margin-bottom: 14px;
        }

        .generate {
            position: absolute;
            right: 0;
            top: 0;
            display: flex;
            align-items: center;

            img {
                width: 12px;
                height: 12px;
                position: relative;
                top: 2px;
            }
        }
    }
}

.docxPreviewFooter {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #d7d7d7;
    padding: 12px 0;
}

.mybtn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    padding: 0;
}

.head_tb {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .title_tb {
        // border-left:4px solid #ccc;
    }
}

.underline-text {
    text-decoration: underline;
    cursor: pointer;
}

.fileView {
    width: 100%;
    height: 75vh;
    // overflow: hidden;
}
</style>
